Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Drag In and Drag Out events #2198

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

roy-mdr
Copy link

@roy-mdr roy-mdr commented Sep 2, 2022

Leaved comments in this commit for code review before merge.

known isues:

  • DnD HTML5 API: If drag too fast to another browser UI element (ej. dev tools) the HTML5 DnD dragLeave event is not triggered (not an issue from this code) ... a workaround could be to force a fallback to get the element at pointer position when dragging back to the browser window.

This PR resolve #2075 #979 #460 #1468 #2159 #1269


Usage

Sortable.create(inboxEl, {
    group: 'inbox',

    onDragIn:  (e) => console.log("+++++ drag in Inbox"),
    onDragOut: (e) => console.log("----- drag out Inbox"),
    onDrop: (e) => console.log("Doped!") // Somewhere inside X,Y of this sortable. Even if no onEnd event.
});

Leaved comments in this commit for code review before merge.

known isues:
- DnD HTML5 API: If drag too fast to another browser UI element (ej. dev tools) the HTML5 DnD dragLeave event is not triggered (not an issue from this code) ... a workaround could be to force a fallback to get the element at pointer position when dragging back to the browser window.
@roy-mdr
Copy link
Author

roy-mdr commented Sep 3, 2022

Svelte demo

REPL: https://svelte.dev/repl/98f5c00046754b13bd4aae4d362b20e2?version=3.50.0

Before: dragIn event was only triggered when it was a valid list to drop in. However if the list was nested in another Sortable the event didn't fire again because it was already marked as valid.
After: dragIn event is triggered even if is not a valid Sortable to drop in. Now is up to the Sortable component to handle and check if the list is allowed to drop in.
onDrop event is triggered when a sortable-dragging element is dropped inside the X and Y of the Sortable element, even if there was no onEnd event triggered
@lovelyelfpop
Copy link

Nice!

@SyedMSawaid
Copy link

@roy-mdr Is it going to merge in to the main library? How long do we have to wait for it?

@roy-mdr
Copy link
Author

roy-mdr commented Mar 28, 2023

@roy-mdr Is it going to merge in to the main library? How long do we have to wait for it?

Unfortunately its not my decision but the original developers :/ Hopefully soon!

@SyedMSawaid
Copy link

@owen-m1 Any idea on when it is going to merge?

P.S. If there are no core maintainers for this project right now, how about we recruit some? I would love to contribute to this library.

@owen-m1
Copy link
Member

owen-m1 commented Jul 2, 2023

@SyedMSawaid Yeah I'm happy to add you if you'd like to contribute, I don't have a lot of time anymore

@RowenTey
Copy link

Any updates on this PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Is there event like "dragOver" or "dragLeave" ?
5 participants